<template>
	<view class="">
		<view class="MerchantsVie">
			<view class="Mersavings">
				<view class="MerchantsImg">
					<image :src="savings.img" mode=""></image>
				</view>
				<view class="savings">
					<view class="savingsName">{{savings.name}}</view>
					<view class="savingsCxk">{{savings.deposit}}</view>
					<view class="savingsArrber">{{savings.number}}</view>
				</view>
			</view>
			<view class="Everbright">
				<view class="MerchantsImg">
					<image :src="Everbright.img" mode=""></image>
				</view>
				<view class="savings">
					<view class="savingsName">{{Everbright.name}}</view>
					<view class="savingsCxk">{{Everbright.deposit}}</view>
					<view class="savingsArrber">{{Everbright.number}}</view>
				</view>
			</view>
			<view class="Agriculture">
				<view class="MerchantsImg">
					<image :src="Agriculture.img" mode=""></image>
				</view>
				<view class="savings">
					<view class="savingsName">{{Agriculture.name}}</view>
					<view class="savingsCxk">{{Agriculture.deposit}}</view>
					<view class="savingsArrber">{{Agriculture.number}}</view>
				</view>
			</view>
			
		</view>
		<!-- <view class="AddTo">
			<view>添加</view>
		</view> -->
	</view>
</template>

<script>
	export default{
		data(){
			return{
				savings:{
					img:'../../../static/images/user/zhaosyh.png',
					name:'招商银行',
					deposit:'储蓄卡',
					number:'**** **** **** 7932'
				},
				Everbright:{
					img:'../../../static/images/user/guangdyh.png',
					name:'光大银行',
					deposit:'储蓄卡',
					number:'**** **** **** 7932'
				},
				Agriculture:{
					img:'../../../static/images/user/hongyyh.png',
					name:'招商银行',
					deposit:'储蓄卡',
					number:'**** **** **** 7932'
				}
			}
		},
		onNavigationBarButtonTap(val) {
			uni.navigateTo({
				url:'addcard'
			})
		},
	}
</script>

<style>
	.MerchantsVie{
		margin-bottom: 150upx;
	}
	/* .AddTo{
		width: 94%;
		padding: 15upx 3%;
		position: fixed;
		bottom: 0px;
		left: 0;
		background: #fff;
		box-shadow: 0upx -1upx 5upx #e2e2e2;
	}
	.AddTo view{
		width: 100%;
		color: #333;
		text-align: center;
		height: 70upx;
		line-height: 70upx;
		border: 1upx dashed #ccc;
	} */
	.Agriculture{
		width: 88%;
		background: linear-gradient(to right, #1ac0ae , #3291ac);
		padding: 20upx 3%;
		border-radius: 20upx;
		margin: 0 auto;
		display: flex;
		margin-top: 20upx;
	}
	.Everbright{
		width: 88%;
		background: linear-gradient(to right, #eabc5f , #f2955c);
		padding: 20upx 3%;
		border-radius: 20upx;
		margin: 0 auto;
		display: flex;
		margin-top: 20upx;
	}
	.Mersavings{
		width: 88%;
		background: linear-gradient(to right, #f98d72 , #ff5d8c);
		padding: 20upx 3%;
		border-radius: 20upx;
		margin: 0 auto;
		display: flex;
		margin-top: 20upx;
	}
	.MerchantsImg{
		width: 80upx;
		height: 80upx;
		border-radius: 50%;
		padding: 13upx;
		background: #fff;
	}
	.MerchantsImg image{
		width: 100%;
		height: 100%;
	}
	.savings view{
		line-height: 1.4;
	}
	.savingsName{
		color: #fff;
		font-size: 32upx;
	}
	.savingsCxk{
		color: #fbfbfb;
		font-size: 28upx;
		margin-top: 5upx;
	}
	.savings{
		margin-top: 10upx;
		margin-left: 15upx;
	}
	.savingsArrber{
		margin-top: 30upx;
		color: #fff;
		font-size: 50upx;
		font-weight: bold;
	}
</style>
